<template>
	<view class="container">
		<navbar bgColor="#ffffff" :homeIcon="navBackIcon" title="课程详情"></navbar>
		<view class="swiper_1 swiper-box">
			<swiper v-if="player_status==1" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image :src="$img_path('/course/index/bg.png')" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>

			<view class="idx" v-if="player_status==1">
				<view class="i">
					1
				</view>
				<view class="all">
					2
				</view>
			</view>
			<!-- 视频播放 -->
			<myVideo v-show="player_status==2" ref="videoDom" class="my-video" @videoTimeupdate="videoTimeupdate"
				:src="$img_path('/1.mp4')"></myVideo>

			<!-- 音频播放 -->
			<myAudio v-show="player_status==3" ref="audioDom" class="my-video" :src="$img_path('/1.mp4')"></myAudio>

			<!-- 试看结束 -->
			<view class="play-end" v-if="playEnd">
				<view class="text">
					播放结束，购买后观看正片
				</view>
				<button>立即购买</button>
				<view class="r_btn" @click="reset_play">
					<image :src="$img_path('/course/r_icon.png')" mode="widthFix"></image>
					<text>重新试看</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1">
				<view class="name">
					课程名称课程名称课程名称
				</view>
				<view class="price">
					<view class="left">
						<view class="">
							<text>￥</text>
							100.00
						</view>
						<text>￥200.00</text>
					</view>
					<view class="right">
						1000人订阅
					</view>
				</view>
			</view>

			<view class="box-2">
				<view class="user" @click="toTeacher">
					<image :src="$img_path('/course/uni.png')" mode="aspectFill"></image>
					<view class="name">
						<view class="n">
							昵称昵称
						</view>
						<view class="tag">
							<view class="item">
								标签标签
							</view>
							<view class="item">
								标签标签
							</view>
						</view>
					</view>
					<view class="g-btn">
						<image :src="$img_path('/course/classify/icon1.png')" mode="widthFix"></image>
						<text>关注</text>
					</view>
				</view>
				<view class="con">
					简介：内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容...
				</view>
			</view>

			<view class="tab-list">
				<view class="tab-box">
					<view class="item" @click="tad_id=1">
						<text :class="tad_id==1 ?'select':''">课程介绍</text>
						<image v-if="tad_id==1" :src="$img_path('/course/classify/icon9.png')" mode="widthFix"></image>
					</view>
					<view class="item" @click="tad_id=2">
						<text :class="tad_id==2 ?'select':''">视频目录</text>
						<image v-if="tad_id==2" :src="$img_path('/course/classify/icon9.png')" mode="widthFix"></image>
					</view>
					<view class="item" @click="tad_id=3">
						<text :class="tad_id==3 ?'select':''">音频目录</text>
						<image v-if="tad_id==3" :src="$img_path('/course/classify/icon9.png')" mode="widthFix"></image>
					</view>
					<view class="item" @click="tad_id=4">
						<text :class="tad_id==4 ?'select':''">资料目录</text>
						<image v-if="tad_id==4" :src="$img_path('/course/classify/icon9.png')" mode="widthFix"></image>
					</view>
				</view>

				<view class="tab-con con-1" v-if="tad_id==1">
					<view class="title">
						课程介绍
					</view>
					<view class="text">
						内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
					</view>
				</view>
				<view class="tab-con con-2" v-if="tad_id==2||tad_id==1">
					<view class="title">
						视频目录
					</view>
					<view class="list">
						<collapse class="one-c" title="一级视频目录" :open="true" style="margin-bottom: 10rpx;">
							<view class="" slot="content">
								<collapse class="c-2" title="二级标题" :titleStyle="{fontSize:'30rpx'}">
									<view class="video-box" slot="content">
										<view class="video-item">
											<view class="left">
												<image :src="$img_path('/course/classify/icon4.png')" mode="widthFix">
												</image>
												<view class="text">
													<view class="name">
														名称名称名称
													</view>
													<view class="time">
														视频 | 05分钟30秒
													</view>
												</view>
											</view>
											<view class="right">
												<button v-if="true" @click="palyVideo(2)">试看</button>
												<image v-else @click="lockClick"
													:src="$img_path('/course/classify/icon5.png')" mode="widthFix">
												</image>
											</view>
										</view>
									</view>
								</collapse>
							</view>
						</collapse>
					</view>
				</view>

				<view class="tab-con con-2" v-if="tad_id==3||tad_id==1">
					<view class="title">
						音频目录
					</view>
					<view class="list">
						<collapse class="one-c" title="一级标题" style="margin-bottom: 10rpx;">
							<view class="" slot="content">
								<collapse class="c-2" title="二级标题" :titleStyle="{fontSize:'30rpx'}">
									<view class="video-box" slot="content">
										<view class="video-item">
											<view class="left">
												<image :src="$img_path('/course/classify/icon6.png')" mode="widthFix">
												</image>
												<view class="text">
													<view class="name">
														名称名称名称
													</view>
													<view class="time">
														视频 | 05分钟30秒
													</view>
												</view>
											</view>
											<view class="right">
												<button v-if="true" @click="palyVideo(3)">试看</button>
												<image v-if="false" :src="$img_path('/course/classify/icon5.png')"
													mode="widthFix"></image>
											</view>
										</view>
									</view>
								</collapse>
							</view>
						</collapse>
					</view>
				</view>

				<view class="tab-con con-2" v-if="tad_id==4||tad_id==1">
					<view class="title">
						资料目录
					</view>
					<view class="list">
						<!-- <collapse class="one-c" title="一级标题" v-for="(item,i) in 2"  style="margin-bottom: 10rpx;">
							<view class="" slot="content">
								<collapse class="c-2" title="二级标题" :titleStyle="{fontSize:'30rpx'}" v-for="(item,i) in 2" >
									<view class="video-box" slot="content">
										<view class="video-item" v-for="(item,i) in 4" >
											<view class="left">
												<image :src="$img_path('/course/classify/icon4.png')" mode="widthFix"></image>
												<view class="text">
													<view class="name">
														文档名称.pdf/word
													</view>
													<view class="time">
														文件 | 200MB
													</view>
												</view>
											</view>
											<view class="right">
												<button v-if="true">试看</button>
												<image v-if="false" :src="$img_path('/course/classify/icon5.png')" mode="widthFix"></image>
											</view>
										</view>
									</view>
								</collapse>
							</view>
						</collapse> -->
					</view>
				</view>

				<view class="bottom-box">
					<image :src="$img_path('/course/uni.png')" mode="aspectFill"></image>
					<view class="text">
						介绍介绍 介绍介绍
					</view>
				</view>
			</view>
		</view>


		<view class="bottom-btn">
			<view class="btn-box">
				<view class="left">
					<view class="l-1">
						<image :src="$img_path('/tarbar/1_s.png')" mode="widthFix"></image>
						<text>首页</text>
					</view>
					<view class="l-1">
						<image :src="$img_path('/course/classify/icon2.png')" mode="widthFix"></image>
						<text>客服</text>
					</view>
					<view class="l-1" @click="shareShow">
						<image :src="$img_path('/course/classify/icon3.png')" mode="widthFix"></image>
						<text>分享</text>
					</view>
				</view>
				<view class="btn">
					<!-- <button>加入购物车</button> -->
					<button @click="submitOrder">立即购买</button>
				</view>
			</view>
		</view>

		<view class="scroll-top" @click="toQYWX">
			<image :src="$img_path('/course/classify/icon10.png')" mode="widthFix"></image>
			<text>企业维信群</text>
		</view>

		<popupBox ref="lock">
			<view class="popup-content" style="width: 60%;
				text-align: center;
				font-weight: bold;
				font-size: 34rpx;
				color: #000000;
				line-height: 48rpx;
				padding: 110rpx 0 50rpx;">
				您还未购买该课程，暂无查看 请去购买课程
			</view>
		</popupBox>

		<!-- 分享 -->
		<popupBox ref="share" type="bottom" :isSlot="true">
			<view class="shareBox">
				<view class="title">
					<text>分享到</text>
					<!-- <image src="@/static/image/login_1.png" @click="$refs.share.close()" mode="widthFix"></image> -->
				</view>
				<view class="box">
					<view class="item" @click="shareClick('WXSceneSession')">
						<image :src="$img_path('/course/classify/1.png')" mode="widthFix"></image>
						<text>微信好友</text>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share"></button>
						<!-- #endif -->
					</view>
					<view class="item" @click="shareClick('WXSceneTimeline')">
						<image :src="$img_path('/course/classify/2.png')" mode="widthFix"></image>
						<text>朋友圈</text>
					</view>
					<view class="item" @click="createdImg()">
						<image :src="$img_path('course/classify/3.png')" mode="widthFix"></image>
						<text>生成海报</text>
					</view>
				</view>
				<view class="btn">
					<button @click="$refs.share.close()">取消</button>
				</view>
			</view>
		</popupBox>

		<!-- 海报弹窗 -->
		<popupBox ref="haibao" type="bottom" customClass="hbpopup" :isSlot="true">
			<view class="haibao">
				<view class="canvas_content">
					<image :src="canvas_img_url" mode="widthFix"></image>
				</view>
				
				<view class="shareBox hb_b">
					<view class="title">
						<text>分享当前图片到</text>
						<!-- <image src="@/static/image/login_1.png" @click="$refs.haibao.close()" mode="widthFix"></image> -->
					</view>
					<view class="box">
						<view class="item" @click="saveCanvasImg()">
							<image :src="$img_path('course/classify/4.png')" mode="widthFix"></image>
							<text>保存图片</text>
						</view>
						<view class="item" @click="shareClick('WXSceneSession')">
							<image :src="$img_path('/course/classify/1.png')" mode="widthFix"></image>
							<text>微信好友</text>
							<!-- #ifdef MP-WEIXIN -->
							<button open-type="share"></button>
							<!-- #endif -->
						</view>
						<view class="item" @click="shareClick('WXSceneTimeline')">
							<image :src="$img_path('/course/classify/2.png')" mode="widthFix"></image>
							<text>朋友圈</text>
						</view>
					</view>
					<view class="btn">
						<button @click="$refs.haibao.close()">取消</button>
					</view>
				</view>
			</view>
			
		</popupBox>

		<view class="jiantou" v-if="pengyouquan" @click="pengyouquan = false">
			<image :style="{'top':5+'px','right':jWidth+'px'}"
				:src="$img_path('/course/jian.png')" mode="widthFix"></image>
			<view class="text">
				请点击这里
			</view>
		</view>
		
		<canvas canvas-id="offlineCanvas" style="width: 634px;height: 968px;position: fixed;z-index: -1;opacity: 0;background-color: #FFFFFF;"></canvas>
	</view>
</template>

<script>
	// import MuiPlayer from 'mui-player'
	import canvas_img from '@/utils/canvas_img';
	import myVideo from '../../components/my_video/my_video.vue';
	import myAudio from '../../components/my_video/my_audio.vue';
	import collapse from '../../components/collapse/collapse.vue';
	import popupBox from '@/components/popup/popup'
	export default {
		components: {
			collapse,
			myVideo,
			myAudio,
			popupBox
		},
		data() {
			return {
				navBackIcon:false,
				jWidth:this.jWidth-30,
				statusBarHeight:this.statusBarHeight,
				navBarHeight:this.navBarHeight,
				tad_id: 1,
				player_status: 1,
				playEnd: false,
				
				pengyouquan:false,//分享朋友圈
				
				canvas_img_url:''
			};
		},
		onLoad(data) {
			if(data.share==1){
				this.navBackIcon = true
			}
		},
		onShow() {

		},
		
		//分享朋友圈
		onShareTimeline(res) {
			return {
				title: '朋友圈',//分享的标题
				imageUrl: '',//展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
				query: 'from=shareTimeline',//页面打开的传参
			}
		},
		// 分享到好友
		onShareAppMessage(res) {
			return {
				title: '好友',//分享的标题
				imageUrl: '',//展示的图片，这里是本地路径的写法，也可以写http或https开头的图片路径
				path: '/pages/index/index',//点击链接后跳转的页面，可以带参数
			}
		},
		methods: {
			toTeacher() {
				uni.navigateTo({
					url: '/pagesCourse/teacher/teacher'
				})
			},
			palyVideo(i) {
				this.player_status = i
				setTimeout(() => {
					if (i == 2) {
						this.$refs.videoDom.init()
					}
					if (i == 3) {
						this.$refs.audioDom.init()
					}
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 100
					})
				}, 500)

			},
			reset_play() {
				this.playEnd = false
				this.$refs.videoDom.play()
			},

			videoTimeupdate(e) {
				let {
					currentTime,
					duration
				} = e.detail
				// if(currentTime>=2){
				// 	this.$refs.videoDom.pause()
				// 	this.playEnd = true
				// }
			},
			
			shareShow(){
				this.$refs.share.open()
			},
			
			shareClick(text){
				if(text=='WXSceneTimeline'){
					this.pengyouquan = true
				}
			},
			
			// 生成海报
			createdImg(){
				canvas_img.initCanvas('offlineCanvas',this,{url:this.$img_path('/course/uni.png')}).then(res=>{
					uni.canvasToTempFilePath({
						canvasId:'offlineCanvas',
						// x: 0,
						// y: 0,
						// width: 634,
						// height: 963,
						success:(res)=>{
							console.log(res)
							this.canvas_img_url = res.tempFilePath
							this.$refs.haibao.open()
						}
					})
				})
			},
			saveCanvasImg(){
				uni.saveImageToPhotosAlbum({
				      filePath: this.canvas_img_url,
				      success: function (res) {
				        var savedFilePath = res.savedFilePath;
				      }
				    });
			},

			lockClick() {
				this.$refs.lock.open()
			},
			
			submitOrder(){
				uni.navigateTo({
					url:`/pagesCourse/order/confirmOrder`
				})
			},

			toQYWX() {}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.swiper_1 {
			width: 100%;
			height: 458rpx;
			position: relative;
			.my-video {
				width: 100%;
				height: 100%;
			}
			.play-end {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				z-index: 5;
				.text {
					font-weight: bold;
					font-size: 34rpx;
					color: #FFFFFF;
					line-height: 48rpx;
				}
				button {
					width: 360rpx;
					height: 88rpx;
					background: linear-gradient(136deg, #FFA233 0%, #FB4C4C 100%);
					box-shadow: 0rpx 4rpx 24rpx 2rpx rgba(0, 0, 0, 0.16);
					border-radius: 82rpx;
					font-weight: bold;
					font-size: 34rpx;
					color: #FFFFFF;
					margin-top: 20rpx;
				}
				.r_btn {
					display: flex;
					align-items: center;
					margin-top: 18rpx;
					image {
						width: 32rpx;
						height: 28rpx;
						vertical-align: middle;
					}
					text {
						font-weight: 500;
						font-size: 30rpx;
						line-height: 42rpx;
						color: #FFFFFF;
						margin-left: 8rpx;
					}
				}
			}
			swiper {
				width: 100%;
				height: 100%;

				swiper-item {
					width: 100%;
					height: 100%;
				}
				.swiper-item {
					width: 100%;
					// border-radius: 20rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 458rpx;
					}
				}
			}
			.idx {
				position: absolute;
				right: 20rpx;
				bottom: 26rpx;
				width: 80rpx;
				height: 40rpx;
				background: rgba(231, 42, 42, 0.5);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				align-items: center;

				&>view {
					text-align: center;
				}
				.i {
					width: 40rpx;
					height: 40rpx;
					background: #E72A2A;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}
				.all {
					width: 40rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}
			}
		}
		.content {
			padding: 20rpx 22rpx 0;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 130rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 130rpx);
			box-sizing: border-box;
			.box1 {
				width: 100%;
				padding: 24rpx 20rpx 40rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				.name {
					font-weight: 800;
					font-size: 36rpx;
					color: #333333;
					line-height: 50rpx;
				}
				.price {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					.left {
						display: flex;
						align-items: flex-end;
						view {
							font-weight: 900;
							font-size: 40rpx;
							color: #FF2E2E;
							line-height: 40rpx;

							text {
								font-size: 32rpx;
							}
						}
						&>text {
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 40rpx;
							text-decoration: line-through;
							margin-left: 10rpx;
						}
					}
					.right {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
					}
				}
			}
			.box-2 {
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				.user {
					display: flex;
					align-items: center;
					justify-content: space-between;

					&>image {
						width: 134rpx;
						height: 134rpx;
						border-radius: 50%;
					}
					.name {
						width: calc(100% - 260rpx);
						display: flex;
						flex-direction: column;
						padding: 0 12rpx 0 20rpx;
						box-sizing: border-box;

						.n {
							font-weight: bold;
							font-size: 36rpx;
							color: #333333;
							line-height: 50rpx;
							margin-bottom: 14rpx;
						}
						.tag {
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							margin-top: 6rpx;
							.item {
								padding: 4rpx 16rpx;
								box-sizing: border-box;
								border-radius: 6rpx 6rpx 6rpx 6rpx;
								border: 2rpx solid #0291FF;
								font-weight: 400;
								font-size: 20rpx;
								color: #0291FF;
								line-height: 28rpx;
								text-align: center;
								margin-right: 10rpx;
							}
						}
					}
					.g-btn {
						width: 126rpx;
						height: 64rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
						border-radius: 32rpx;
						background: #E72A2A;
						image {
							width: 24rpx;
							height: 24rpx;
						}
						text {
							font-weight: bold;
							font-size: 26rpx;
							color: #FFFFFF;
							line-height: 36rpx;
						}
					}
				}
				.con {
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					margin-top: 20rpx;
				}
			}
			.tab-list {
				.tab-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 0 42rpx;
					.item {
						position: relative;
						text {
							font-weight: bold;
							font-size: 32rpx;
							color: #999999;
							line-height: 44rpx;

							&.select {
								color: #333333;
							}
						}
						image {
							width: 38rpx;
							height: 12rpx;
							position: absolute;
							top: 100%;
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}
				.tab-con {
					margin-bottom: 40rpx;
					&.con-1 {
						background-color: #FFFFFF;
						border-radius: 20rpx;
						padding: 20rpx 20rpx 48rpx;
						box-sizing: border-box;
						.text {
							margin-top: 20rpx;
						}
					}
					.title {
						padding-left: 20rpx;
						position: relative;
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
						line-height: 50rpx;
						background-color: #FFFFFF;
						border-radius: 20rpx 20rpx 0 0;
						&::before {
							content: '';
							width: 8rpx;
							height: 28rpx;
							background: #E72A2A;
							border-radius: 4rpx;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
					}
					&.con-2 {
						.title {
							padding-top: 20rpx;
							padding-left: 40rpx;
							padding-bottom: 14rpx;

							&::before {
								left: 20rpx;
								margin-top: 6rpx;
							}
						}
						.list {
							.one-c {
								&:last-child {
									border-radius: 0 0 20rpx 20rpx;
									overflow: hidden;
								}
							}
							.video-box {
								.video-item {
									display: flex;
									align-items: center;
									justify-content: space-between;
									padding: 24rpx 20rpx;
									box-sizing: border-box;
									border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
									.left {
										display: flex;
										align-items: center;

										&>image {
											width: 48rpx;
											height: 30.7rpx;
										}
										.text {
											margin-left: 18rpx;
											.name {
												font-weight: bold;
												font-size: 28rpx;
												color: #333333;
												line-height: 40rpx;
											}
											.time {
												font-weight: bold;
												font-size: 24rpx;
												color: #999999;
												line-height: 34rpx;
												margin-top: 4rpx;
											}
										}
									}
									.right {
										button {
											width: 126rpx;
											height: 64rpx;
											background: #FFEEEE;
											border-radius: 32rpx 32rpx 32rpx 32rpx;
											border: 2rpx solid #E72A2A;
											font-weight: bold;
											font-size: 26rpx;
											color: #E72A2A;
											line-height: 64rpx;
											text-align: center;
										}

										image {
											width: 40rpx;
											height: 52rpx;
										}
									}
								}
							}
						}
					}
				}

				.bottom-box {
					margin-top: 156rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 24rpx;

					image {
						display: block;
						width: 440rpx;
						height: 126rpx;
					}

					text {
						margin-top: 16rpx;
					}
				}
			}
		}


		.bottom-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			padding: 16rpx 22rpx 0;
			box-sizing: border-box;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
			background-color: #FFFFFF;
			box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.l-1 {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						&:not(:first-child) {
							margin-left: 54rpx;
						}

						image {
							width: 36rpx;
							height: 36rpx;
						}

						text {
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;
							line-height: 32rpx;
							margin-top: 4rpx;
						}
					}
				}

				.btn {
					display: flex;
					justify-content: flex-end;

					button {
						width: 412rpx;
						height: 96rpx;
						font-weight: bold;
						font-size: 36rpx;
						color: #FFFFFF;
						line-height: 96rpx;
						border-radius: 80rpx;
						background: linear-gradient(131deg, #FFA233 0%, #FB4C4C 100%);
						// &:first-child{
						// 	background: linear-gradient( 90deg, #F6C739 0%, #F89B2D 100%);
						// 	border-radius: 80rpx 0rpx 0rpx 80rpx;
						// }
						// &:last-child{
						// 		background: linear-gradient( 90deg, #eb6624 0%, #F75821 100%);
						// 		border-radius: 0rpx 80rpx 80rpx 0rpx;
						// }
					}
				}
			}
		}
	}

	.scroll-top {
		position: fixed;
		bottom: 400rpx;
		right: 22rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 80rpx;
			height: 80rpx;
		}

		text {
			font-weight: 300;
			font-size: 22rpx;
			color: #333333;
			line-height: 32rpx;
			margin-top: 8rpx;
		}
	}

	.shareBox {
		padding: 40rpx 0 0;
		background: #F5F5F5;

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			text {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 30rpx;
				top: 0;
			}
		}

		.box {
			padding: 70rpx 30rpx 38rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.item {
				display: flex;
				flex-direction: column;

				image {
					width: 120rpx;
					height: 120rpx;
				}

				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
					margin-top: 20rpx;
					text-align: center;
				}

				position: relative;

				button {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					opacity: 0;
				}
			}
		}

		&.coupon {
			background-color: #FFFFFF;
		}

		.coupon-box {
			padding: 70rpx 30rpx 38rpx;

			.item {
				width: 100%;
				height: 186rpx;
				position: relative;

				&:not(:last-child) {
					margin-bottom: 30rpx;
				}

				&>image.bg {
					width: 100%;
					height: 100%;
				}

				.c_num {
					position: absolute;
					left: 40rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: center;

					.price {
						font-weight: bold;
						font-size: 48rpx;
						color: #FD845C;
						line-height: 66rpx;

						text {
							font-size: 30rpx;
						}
					}

					&>text {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 8rpx;
					}
				}

				.c_info {
					position: absolute;
					left: 204rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.xz {
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
						line-height: 32rpx;
					}

					.c_box {
						font-weight: 400;
						font-size: 20rpx;
						color: #666666;
						line-height: 28rpx;
						margin-top: 6rpx;
					}

					.time {
						font-weight: 400;
						font-size: 20rpx;
						color: #FF575B;
						line-height: 28rpx;
						margin-top: 18rpx;
					}
				}

				.checkImg {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 116rpx;
					height: 48rpx;
				}

			}
		}


		.btn {
			padding: 20rpx 30rpx;
			// box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
			// background: #FFFFFF;

			button {
				width: 100%;
				height: 96rpx;
				background: linear-gradient(90deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}
	
	.haibao{
		.canvas_content{
			width: 520rpx;
			height: auto;
			background: #FFFFFF;
			box-sizing: border-box;
			// background-color: #F5F5F5;
			border-radius: 20rpx;
			margin: 0 auto 32rpx;
			&>image{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		.hb_b{
			background-color: #F5F5F5;
			border-radius: 16rpx 16rpx 0 0;
			
			padding-bottom: calc(constant(safe-area-inset-bottom));
			padding-bottom: calc(env(safe-area-inset-bottom));
		}
	}
	
	.jiantou{
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top:0;
		left: 0;
		z-index: 999999;
		image{
			width: 300rpx;
			height: 400rpx;
			position: absolute;
		}
		view{
			position: absolute;
			top: 500rpx;
			right: 300rpx;
			color: #FF0000;
			font-size: 48rpx;
			font-weight: bold;
		}
	}
	
	/deep/ .hbpopup{
		background-color: transparent !important;
		padding-bottom: 0 !important;
	}
</style>